<template>
  <view class="gdqss">
    <view class="SecretKey">
      <u-circle-progress
        :percent="gd.SecretKeyInfo.percentage"
        active-color="#2979ff"
        border-width="26"
        width="300"
      >
        <view class="u-progress-content">
          <view class="u-progress-dot"></view>
          <text class="u-progress-info">
            {{ gd.SecretKeyInfo.consume }}/{{ gd.SecretKeyInfo.total }}
          </text>
        </view>
      </u-circle-progress>
      <view class="mask">
        <u-section
          :right="false"
          :show-line="false"
          class="mask-item"
          :title="$t('秘钥使用情况')"
        ></u-section>
        <view class="mask-item">
          {{$t('已使用')}}：
          <text :style="{ '--color': '#00aaff' }" class="mask-text">
            {{ gd.SecretKeyInfo.consume }}（{{ gd.SecretKeyInfo.percentage }}%）
          </text>
        </view>
        <view class="mask-item">
          {{$t('剩余量')}}：
          <text :style="{ '--color': '#00aaff' }" class="mask-text">
            {{ gd.SecretKeyInfo.surplus }}
          </text>
        </view>
        <view class="mask-item">
          {{$t('总共量')}}：
          <text :style="{ '--color': '#00aaff' }" class="mask-text">
            {{ gd.SecretKeyInfo.total }}
          </text>
        </view>
      </view>
    </view>
    <uni-list class="uni-list">
      <uni-list-item clickable :note="$t('开启后,国盾量子解密功能才能正常使用')" :title="$t('是否启用')">
        <u-icon slot="header" name="gear" size="40"></u-icon>
        <u-switch slot="footer" v-model="gd.enable" @change="switchChageEnable"></u-switch>
      </uni-list-item>
      <uni-list-item
        link
        :note="`${$t('使用量阈值默认为')}80%,${$t('点击可设置')}`"
        :title="$t('设置阈值')"
        @click="listItemClick"
      >
        <u-icon slot="header" name="setting" size="40"></u-icon>
        <view slot="footer" style="line-height: 70rpx">
          {{ gd.threshold + '%' }}
        </view>
      </uni-list-item>
      <uni-list-item clickable :note="$t('开启后,秘钥使用量达到指定阈值后会提醒')" :title="$t('提醒')">
        <u-icon slot="header" name="bell" size="40"></u-icon>
        <u-switch slot="footer" v-model="gd.remind" @change="switchChage"></u-switch>
      </uni-list-item>
    </uni-list>

    <u-select v-model="select.show" :list="select.list" @confirm="confirm"></u-select>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      gd: {
        enable: getApp().globalData.GD_QSS.enable, //是否启用
        remind: getApp().globalData.GD_QSS.remind, //提醒开关
        SecretKeyInfo: {},
        threshold: getApp().globalData.GD_QSS.threshold
      },
      select: {
        show: false,
        list: [
          {
            value: 100,
            label: '100%'
          },
          {
            value: 90,
            label: '90%'
          },
          {
            value: 80,
            label: '80%'
          },
          {
            value: 70,
            label: '70%'
          },
          {
            value: 60,
            label: '60%'
          },
          {
            value: 50,
            label: '50%'
          },
          {
            value: 40,
            label: '40%'
          },
          {
            value: 30,
            label: '30%'
          },
          {
            value: 20,
            label: '20%'
          },
          {
            value: 10,
            label: '10%'
          }
        ]
      }
    }
  },
  async onLoad() {
    uni.setNavigationBarTitle({title: this.$t('国盾量子')})
    this.gd.SecretKeyInfo = await this.$lizhao.gdQSS.getSecretKeyInfo()
  },
  methods: {
    confirm(e) {
      let threshold = e[0].value
      uni.setStorageSync('gd_secretKey_threshold', threshold)
      getApp().globalData.GD_QSS.threshold = threshold
      this.gd.threshold = threshold
    },
    switchChage(e) {
      uni.showToast({
        title: e ? this.$t('已开启提醒功能') : this.$t('已关闭提醒功能'),
        icon: 'none'
      })
      getApp().globalData.GD_QSS.remind = e
      uni.setStorageSync('gd_secretKey_remind', e)
    },
    switchChageEnable(e) {
      uni.showToast({
        title: e ? this.$t('已开启量子功能') : this.$t('已关闭量子功能'),
        icon: 'none'
      })
      getApp().globalData.GD_QSS.enable = e
      uni.setStorageSync('gd_secretKey_enable', e)
    },
    listItemClick() {
      this.select.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.gdqss {
  .SecretKey {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;

    .mask {
      display: flex;
      flex-direction: column;
      width: 45%;

      .mask-item {
        margin-top: 20rpx;

        .mask-text {
          color: var(--color);
        }
      }
    }
  }
}
</style>
